<template>
  <div>
    <el-card class="box-card" style="margin-top:10px;">
      <!-- 方格视图 -->
      <el-row v-if="'grid' == mode">
        <el-col v-for="file in files" :key="file.filename" :span="6" style="padding:5px;">
          <el-tooltip class="item" effect="dark" placement="bottom-start" :open-delay="1000">
            <div slot="content">
              文件名：{{file.filename}}<br/>
              大小：{{file.attrs.size | filesize}}<br/>
              权限：{{file.attrs.mode | fileMode}}<br/>
              创建时间：{{file.attrs.atime | datetime}}<br/>
              修改时间：{{file.attrs.mtime | datetime}}<br/>
            </div>
            <el-card class="box-card" shadow="hover" @click.native="actionItemClick(file)" @contextmenu.native="actionItemContextMenuShow(file, $event)">
              <el-row>
                <el-col :span="3">
                  <i v-if="file.attrs.isDirectory()" class="el-icon-folder"></i>
                  <i v-if="file.attrs.isSymbolicLink()" class="el-icon-link"></i>
                  <i v-if="file.attrs.isFile()" class="el-icon-document"></i>
                  <i v-if="file.attrs.isSocket()" class="el-icon-share"></i>
                  <i v-if="file.attrs.isFIFO()" class="el-icon-s-fold"></i>
                  <i v-if="file.attrs.isBlockDevice() || file.attrs.isCharacterDevice()" class="el-icon-news"></i>
                </el-col>
                <el-col :span="21" class="grid-file-name cursor-default">{{file.filename}}</el-col>
              </el-row>
            </el-card>
           </el-tooltip>
        </el-col>
      </el-row>
    
      <!-- 列表视图 -->
      <el-table v-if="'list' == mode" :data="files" @row-contextmenu="actionListRowContextmenu">
        <el-table-column width="50">
          <template slot-scope="scope">
            <i v-if="scope.row.attrs.isDirectory()" class="el-icon-folder"></i>
            <i v-if="scope.row.attrs.isSymbolicLink()" class="el-icon-link"></i>
            <i v-if="scope.row.attrs.isFile()" class="el-icon-document"></i>
            <i v-if="scope.row.attrs.isSocket()" class="el-icon-share"></i>
            <i v-if="scope.row.attrs.isFIFO()" class="el-icon-s-fold"></i>
            <i v-if="scope.row.attrs.isBlockDevice() || scope.row.attrs.isCharacterDevice()" class="el-icon-news"></i>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span class="cursor-pointer" @click="actionItemClick(scope.row)">{{scope.row.filename }}</span>
          </template>
        </el-table-column>
        <el-table-column label="大小" width="100">
          <template slot-scope="scope"><span>{{scope.row.attrs.size | filesize }}</span></template>
        </el-table-column>
        <el-table-column label="权限" width="100">
          <template slot-scope="scope"> {{scope.row.attrs.mode | fileMode}} </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template slot-scope="scope"> {{scope.row.attrs.atime | datetime}} </template>
        </el-table-column>
        <el-table-column label="修改时间" width="200">
          <template slot-scope="scope"> {{scope.row.attrs.mtime | datetime}} </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import Formatter from '../../utils/Formatter.js'
export default {
    name : 'CardFileListViewer',
    props : ['files', 'mode'],
    filters : {
        // 格式化文件大小
        filesize ( value ) {
            return Formatter.asFileSize(value);
        },
        // 格式化文件模式
        fileMode(value) {
            return Formatter.asLinuxFileMode(value);
        },
        // 格式化时间
        datetime(value) {
            return Formatter.asDatetime(value);
        },
    },
    computed : {
        // 文件右键菜单样式
        itemContextMenuStyle() {
            return {
                top : `${this.itemContextMenu.event.clientY - 5}px`,
                left : `${this.itemContextMenu.event.clientX - 5}px`
            };
        },
        // 文件右键菜单项目
        itemContextMenuActions() {
            let items = [];
            items.push({action:'delete',name:'删除'});
            items.push({action:'rename',name:'重命名'});
            if ( !this.itemContextMenu.item.attrs.isDirectory() ) {
                items.push({action:'text-edit',name:'编辑文本'});
                items.push({action:'download',name:'下载'});
            }
            return items;
        },
    },
    methods : {
        // 列表项目右键点击
        actionListRowContextmenu( row, column, event ) {
            this.actionItemContextMenuShow(row, event);
        },

        // 文件点击右键
        actionItemContextMenuShow( file, event ) {
            let $this = this;
            this.$contextmenu({ 
               items: [{
                    label: "删除",
                    onClick: () => { $this.actionHandleContextMenuOperation(file, 'delete');},
                } , { 
                    label: "重命名", 
                    onClick: () => { $this.actionHandleContextMenuOperation(file, 'rename');},
                },{
                    label: "编辑文本", 
                    onClick: () => { $this.actionHandleContextMenuOperation(file, 'text-edit');},
                    disabled : file.attrs.isDirectory(),
                },{
                    label: "下载", 
                    onClick: () => { $this.actionHandleContextMenuOperation(file, 'download');},
                    disabled : file.attrs.isDirectory(),
                }],
                event,
                customClass: "custom-class",
                zIndex: 10000,
                minWidth: 230
            });
        },

        // 右键菜单关闭
        actionItemContextMenuMouseLeave() {
            this.itemContextMenu.enable = false;
            this.$forceUpdate();
        },

        // 右键菜单操作
        actionHandleContextMenuOperation( file, action ) {
            this.$emit(`file-${action}`, file);
        },

        // 文件点击
        actionItemClick( file ) {
            if ( file.attrs.isDirectory() ) {
                this.$emit('folder-click', file);
            } else {
                this.$emit('file-click', file);
            }
        },
    }
}
</script>
<style scoped>
.grid-file-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>